<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li:first-child {
				/* color: orange; */
			}

			ul li:last-child {
				/* color: red; */
			}

			/*
			  表达式 an+b
			  n从0开始，每次加1,往后计算
			  2n:偶数
			  2*0=0
			  2*1=2
			  2*2=4
			  2*3=6
			  2*4=8
			  2*5=10
		    */
			ul li:nth-child(2n) {
				/* color: orange; */
			}

			/*
			  2n+1:奇数
			  2*0+1=1
			  2*1+1=3
			  2*2+1=5
			  2*3+1=7
			  2*4+1=9
			*/
			ul li:nth-child(2n+1) {
				/* color: orange; */
			}

			/*
			  0n+3=3
			*/
			ul li:nth-child(0n+3) {
				/* color: orange; */
			}

			/*
			 -n+3
			 -0+3=3
			 -1+3=2
			 -2+3=1
			 -3+3=0
			*/
			ul li:nth-child(-n+3) {
				color: orange;
			}

			input:disabled {
				background-color: orange;
			}

			input:checked+label {
				color: orange;
			}
			
            /* 未访问 */
			a:link {
				color: red;
			}
            /* 已访问过 */
			a:visited {
				color: yellow;
			}
            /* 鼠标移动到链接上 */
			a:hover {
				color: blue;
			}
            /* 点击链接时 */
			a:active {
				color: green;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>

		<p>姓名<input type="text" name="uname" disabled /></p>
		<p>密码<input type="password" name="upwd" /></p>
		<p>性别<input type="radio" name="gender" value="man" checked /><label>男</label>
			<input type="radio" name="gender" value="woman" />女
		</p>
		<p>爱好<input type="checkbox" name="ah" value="study">学习
			<input type="checkbox" name="ah" value="sport">运动
		</p>
		<a href="https://www.atstudy.com">学掌门</a>
	</body>
</html>
